<template>
  <div class="guess">
    <div class="guess-tytie">
      <img class="heart" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt>
      <span class="tytle">猜你喜欢</span>
    </div>
    <ul class="guess-content">
      <li v-for="item in loveList" :key="item.id">
        <router-link class="goto" to>
          <div class="item-left">
            <img
              :src="item.imgUrl"
              alt
            >
          </div>
          <div class="item-right">
            <div class="item-tytle">{{item.tytle}}</div>
            <van-rate v-model="value"/>
            <span class="num">{{item.autors}}条评论</span>
            <div class="live-price">
              <span class="price">
                ￥
                <em class="price-num">{{item.price}}</em>
              </span>起
              <span class="address">{{item.address}}</span>
            </div>
            <div class="live-feature">
              <div class="text">{{item.text}}</div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: 3,
      'loveList': [{
        'id': '001',
        'tytle': '长隆国际大马戏剧院',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/201405/27/ef08b0cb4a5afb2f570e5c4dff5f743e.jpg_200x200_f3ad8918.jpg',
        'autors': '30551',
        'star': '3',
        'price': '325',
        'text': '跟着大马戏团一起party~',
        'address': '广州长隆...'
      },
      {
        'id': '002',
        'tytle': '长隆野生动物世界',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/201403/07/30b534b0de51ccac2906bcb6ba159988.jpg_200x200_2f08733b.jpg',
        'autors': '90514',
        'star': '3',
        'price': '209.9',
        'text': '熊猫三胞胎与您共享欢乐时光~',
        'address': '广州长隆...'
      },
      {
        'id': '003',
        'tytle': '长隆欢乐世界',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1707/88/889ae02b07140066a3.img.jpg_200x200_d3b1427c.jpg',
        'autors': '49450',
        'star': '3',
        'price': '174.9',
        'text': '爱挑战的你怎能错过垂直过山车~',
        'address': '广州长隆...'
      },
      {
        'id': '004',
        'tytle': '广州长隆旅游度假区',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1603/3b/3bd311262ee06d8c90.img.jpg_200x200_c118d7da.jpg',
        'autors': '46498',
        'star': '3',
        'price': '69.7',
        'text': '《奔跑吧兄弟》取景地~',
        'address': '番禺'
      },
      {
        'id': '005',
        'tytle': '碧水湾温泉度假村',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1410/20/41d723daadc98045fe6b7283ba0af40c.jpg_200x200_5a05d5bc.jpg',
        'autors': '7585',
        'star': '3',
        'price': '95',
        'text': '',
        'address': '从化市'
      },
      {
        'id': '006',
        'tytle': '岭南印象园',
        'imgUrl': 'http://img1.qunarzz.com/sight/p0/1509/80/9535a0d28468b3c6c910d87f1a4fdbe8.water.jpg_200x200_ea09ee17.jpg',
        'autors': '13322',
        'star': '3',
        'price': '45',
        'text': '岭南印象园江面上龙船竞渡，水中好戏不断~',
        'address': '番禺'
      }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.guess {
  margin-top: 0.2rem;
  width: 100%;
  background: #fff;
  .guess-tytie {
    position: relative;
    padding: 0.24rem 0 0.26rem;
    .heart {
      display: inline-block;
      overflow: hidden;
      width: 0.3rem;
      height: 0.3rem;
      margin-left: 0.2rem;
      vertical-align: top;
    }
    .tytle {
      display: inline-block;
      margin-left: 0.08rem;
      height: 0.44rem;
      color: #212121;
      font-size: 0.32rem;
      line-height: 0.44rem;
    }
  }
  .guess-content {
    padding: 0 0.24rem;
    li {
      position: relative;
      overflow: hidden;
      padding: 0.2rem 0;
      .goto {
        display: block;
        .item-left {
          float: left;
          overflow: hidden;
          width: 2rem;
          height: 2rem;
          img {
            width: 100%;
          }
        }
        .item-right {
          overflow: hidden;
          padding-left: 0.22rem;
          .item-tytle {
            margin-top: 0.26rem;
            height: 0.44rem;
            color: #212121;
            font-size: 0.32rem;
            line-height: 0.44rem;
          }
          .van-rate {
            display: inline-block;
          }
          .num {
            margin-left: 0.2rem;
            color: #212121;
          }
          .live-price {
            position: relative;
            margin-top: 0.22rem;
            color: #616161;
            font-size: 0.24rem;
            line-height: 0.4rem;
            .price {
              color: #ff8300;
              .price-num {
                font-size: 0.4rem;
              }
            }
            .address {
              float: right;
            }
          }
          .live-feature {
            display: inline-block;
            margin-top: 0.48rem;
            margin-right: 0.24rem;
            background: #fff9f9;
            padding: 0.04rem 0.1rem;
            color: #f55;
            font-size: 0.24rem;
            line-height: 0.34rem;
            .text {
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
      &:not(:first-child){
        border-top:1px solid #ccc;
      }
    }
  }
}
</style>
